<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page">
    <div class="card">
        <div class="card-header">
            <form id="search_form">
                <input type="hidden" id="search_status" name="status" value="0">
                <input class="easyui-textbox" data-options="label:'参数名称'" name="configName" style="width:220px;">
                <input class="easyui-textbox" data-options="label:'参数键名'" name="configKey" style="width:220px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="resetForm()">重置</a>
                <a href="#" class="easyui-linkbutton button-info" data-options="iconCls:'icon-search'" onclick="dm.search('table', 'search_form')">查询</a>
                <a shiro:hasPermission="system:config:export" href="#" class="easyui-linkbutton" style="margin-left: 10px"
                   data-options="iconCls:'icon-save'" onclick="exportExcel()">导出</a>
            </form>
        </div>
        <div class="card-body">
            <div id="table"></div>
            <div id="toolbar" style="display: none">
                <a shiro:hasPermission="system:config:add" href="#" onclick="add()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">增加</a>
                <a shiro:hasPermission="system:config:edit" href="#" onclick="edit()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改</a>
                <a shiro:hasPermission="system:config:delete" href="#" onclick="remove()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove',plain:true">删除</a>
                <input id="btnShowDisabled">
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    $(function() {
        $('#table').datagrid({
            url: '/system/config/list',
            queryParams: {status: 0},
            fit: true,
            fitColumns: true,
            nowrap: true,
            singleSelect: true,// 单选模式
            pagination: true,
            pageSize: 20, // 每一页多少条数据
            pageList: [ 10, 20, 30, 40, 50 ], // 可以选择的每页的大小的combobox
            idField: 'configId',
            sortName: 'configId',
            toolbar: '#toolbar',
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'configName', title: '参数名称', width: 150},
                {field: 'configKey', title: '参数键名', width: 150},
                {field: 'configValue', title: '参数键值', width: 100},
                {field: 'status',title: '状态',align:'center',sortable: true, width: 50,formatter: statusFormatter}
            ] ]
        });
    });

    function add() {
        dm.openDialog('新增配置', '/system/config/add', 500, 320);
    }
    function edit() {
        dm.getRow('table',function (row) {
            dm.openDialog('修改配置','/system/config/edit/'+row.configId, 500, 360);
        })
    }
    function remove(){
        dm.getRow('table', row => {
            dm.confirm('删除操作不可恢复。您确定要删除吗？',() => {
                dm.post('/system/config/delete/'+row.configId, {}, function () {
                    dm.search('table');
                })
            })
        })
    }

    function exportExcel() {

    }

    function resetForm() {
        var checked = $('#btnShowDisabled').checkbox('isCheck');
        $("#search_form").form('clear');
        $('#search_status').val(checked ? '' : 0);
    }

    $('#btnShowDisabled').checkbox({
        label:'显示停用',
        onChange:function (checked) {
            $('#search_status').val(checked ? '' : 0);
            dm.search('table', 'search_form');
        }
    });

</script>
</body>
</html>
